<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-初识jQuery</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        window.onload = function(ev) {
            // 1、利用原生的JS查找DOM元素
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("box1")[0];
            var div3 = document.getElementById("box2");
            console.log(div1);
            console.log(div2);
            console.log(div3);

            // 2、利用原生的JS修改背景颜色
            // div1.style.backgroundColor = "red";
            // div2.style.backgroundColor = "blue";
            // div3.style.backgroundColor = "yellow";
        }

        $(function () {
            // 1、利用jQuery查找DOM元素
            // var $div1 = $("div")[0];
            // var $div2 = $(".box1")[0];
            // var $div3 = $("#box2")[0];
            // console.log($div1);
            // console.log($div2);
            // console.log($div3);

            // 2、利用jQuery修改背景颜色
            var $div1 = $("div");
            var $div2 = $(".box1");
            var $div3 = $("#box2");
            $div1.css({
                backgroundColor: "pink",
                width: "200px",
                height: "200px"
            });
            $div2.css({
                backgroundColor: "blue"
            });
            $div3.css({
                backgroundColor: "yellow"
            });
        });
    </script>
   
</head>
<body>
    <div></div>
    <div class="box1"></div>
    <div id="box2"></div>
</body>
</html>